<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Ionic Book Manager</title>
    <base href="./"/>
    <meta name="color-scheme" content="light dark"/>
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    
    <!-- Ionic CSS -->
    <link rel="stylesheet" href="./css/chunk-ionic.f5c8e0e3.css">
    <link rel="stylesheet" href="./css/app.7b141fc5.css">
    
    <style>
        .debug-overlay {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px;
            border-radius: 4px;
            font-size: 11px;
            z-index: 10000;
            max-width: 250px;
        }
        .status-success { color: #4CAF50; }
        .status-error { color: #F44336; }
        .status-warning { color: #FF9800; }
    </style>
</head>
<body>
    <div id="app">
        <!-- Loading indicator -->
        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column;">
            <div style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
            <p style="margin-top: 20px; color: #666;">Loading Ionic App...</p>
        </div>
    </div>
    
    <!-- Debug overlay -->
    <div class="debug-overlay">
        <div>🔧 HarmonyOS Debug</div>
        <div id="debug-status" class="status-success">✓ HTML Loaded</div>
    </div>

    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <script>
        // Debug function
        function updateDebug(message, status = 'success') {
            const element = document.getElementById('debug-status');
            if (element) {
                element.className = `status-${status}`;
                element.innerHTML = status === 'success' ? `✓ ${message}` : 
                                  status === 'error' ? `✗ ${message}` : 
                                  `⏳ ${message}`;
            }
        }

        // Environment setup
        window.process = window.process || {};
        window.process.env = window.process.env || {};
        window.process.env.NODE_ENV = 'production';
        window.process.env.BASE_URL = './';

        // Global error handler
        window.addEventListener('error', function(e) {
            console.error('Error:', e.error);
            updateDebug(`Error: ${e.message}`, 'error');
        });

        // Wait for DOM to be ready
        document.addEventListener('DOMContentLoaded', function() {
            updateDebug('DOM Ready');
            
            // Initialize Ionic Vue app manually
            setTimeout(initializeApp, 100);
        });

        function initializeApp() {
            updateDebug('Initializing App...');
            
            // Create a simple Ionic Vue app structure
            const appHtml = `
                <ion-app>
                    <ion-header>
                        <ion-toolbar color="primary">
                            <ion-title>图书管理系统</ion-title>
                        </ion-toolbar>
                    </ion-header>
                    
                    <ion-content class="ion-padding">
                        <div id="page-content">
                            <!-- Home Page Content -->
                            <div id="home-page" class="page-content">
                                <ion-card>
                                    <ion-card-header>
                                        <ion-card-title>欢迎使用图书管理系统</ion-card-title>
                                        <ion-card-subtitle>Ionic Vue + HarmonyOS</ion-card-subtitle>
                                    </ion-card-header>
                                    <ion-card-content>
                                        <p>这是一个运行在 HarmonyOS 上的 Ionic Vue 应用。</p>
                                        <ion-button expand="block" onclick="showBooks()">
                                            <ion-icon name="library-outline" slot="start"></ion-icon>
                                            查看图书
                                        </ion-button>
                                        <ion-button expand="block" fill="outline" onclick="showBorrow()">
                                            <ion-icon name="book-outline" slot="start"></ion-icon>
                                            借阅管理
                                        </ion-button>
                                    </ion-card-content>
                                </ion-card>
                                
                                <ion-list>
                                    <ion-list-header>
                                        <ion-label>快速功能</ion-label>
                                    </ion-list-header>
                                    <ion-item button onclick="showSearch()">
                                        <ion-icon name="search-outline" slot="start"></ion-icon>
                                        <ion-label>搜索图书</ion-label>
                                    </ion-item>
                                    <ion-item button onclick="showProfile()">
                                        <ion-icon name="person-outline" slot="start"></ion-icon>
                                        <ion-label>个人中心</ion-label>
                                    </ion-item>
                                </ion-list>
                            </div>
                            
                            <!-- Books Page Content -->
                            <div id="books-page" class="page-content" style="display: none;">
                                <ion-button fill="clear" onclick="showHome()">
                                    <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
                                    返回
                                </ion-button>
                                <h2>图书列表</h2>
                                <ion-list>
                                    <ion-item>
                                        <ion-thumbnail slot="start">
                                            <img src="./assets/images/book1.jpg" alt="Book" style="background: #f0f0f0;">
                                        </ion-thumbnail>
                                        <ion-label>
                                            <h3>Vue.js 实战指南</h3>
                                            <p>前端开发必备技能</p>
                                            <p>状态: 可借阅</p>
                                        </ion-label>
                                        <ion-button fill="outline" size="small">借阅</ion-button>
                                    </ion-item>
                                    <ion-item>
                                        <ion-thumbnail slot="start">
                                            <img src="./assets/images/book2.jpg" alt="Book" style="background: #f0f0f0;">
                                        </ion-thumbnail>
                                        <ion-label>
                                            <h3>HarmonyOS 开发教程</h3>
                                            <p>华为鸿蒙系统开发</p>
                                            <p>状态: 已借出</p>
                                        </ion-label>
                                        <ion-button fill="outline" size="small" disabled>已借出</ion-button>
                                    </ion-item>
                                    <ion-item>
                                        <ion-thumbnail slot="start">
                                            <img src="./assets/images/book3.jpg" alt="Book" style="background: #f0f0f0;">
                                        </ion-thumbnail>
                                        <ion-label>
                                            <h3>Ionic 移动应用开发</h3>
                                            <p>跨平台移动应用框架</p>
                                            <p>状态: 可借阅</p>
                                        </ion-label>
                                        <ion-button fill="outline" size="small">借阅</ion-button>
                                    </ion-item>
                                </ion-list>
                            </div>
                            
                            <!-- Borrow Page Content -->
                            <div id="borrow-page" class="page-content" style="display: none;">
                                <ion-button fill="clear" onclick="showHome()">
                                    <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
                                    返回
                                </ion-button>
                                <h2>借阅管理</h2>
                                <ion-segment value="borrowed">
                                    <ion-segment-button value="borrowed">
                                        <ion-label>已借阅</ion-label>
                                    </ion-segment-button>
                                    <ion-segment-button value="history">
                                        <ion-label>借阅历史</ion-label>
                                    </ion-segment-button>
                                </ion-segment>
                                
                                <ion-list>
                                    <ion-item>
                                        <ion-label>
                                            <h3>Vue.js 实战指南</h3>
                                            <p>借阅日期: 2024-01-15</p>
                                            <p>应还日期: 2024-02-15</p>
                                        </ion-label>
                                        <ion-button color="success" size="small">归还</ion-button>
                                    </ion-item>
                                </ion-list>
                            </div>
                            
                            <!-- Search Page Content -->
                            <div id="search-page" class="page-content" style="display: none;">
                                <ion-button fill="clear" onclick="showHome()">
                                    <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
                                    返回
                                </ion-button>
                                <h2>搜索图书</h2>
                                <ion-searchbar placeholder="输入书名或作者"></ion-searchbar>
                                <ion-list>
                                    <ion-item>
                                        <ion-label>
                                            <h3>搜索结果将在这里显示</h3>
                                            <p>请输入关键词进行搜索</p>
                                        </ion-label>
                                    </ion-item>
                                </ion-list>
                            </div>
                            
                            <!-- Profile Page Content -->
                            <div id="profile-page" class="page-content" style="display: none;">
                                <ion-button fill="clear" onclick="showHome()">
                                    <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
                                    返回
                                </ion-button>
                                <h2>个人中心</h2>
                                <ion-card>
                                    <ion-card-content>
                                        <ion-avatar style="margin: 0 auto 16px; display: block;">
                                            <img src="./assets/images/avatar.jpg" alt="Avatar" style="background: #ddd;">
                                        </ion-avatar>
                                        <h3 style="text-align: center;">用户名</h3>
                                        <p style="text-align: center;">学号: 2024001</p>
                                    </ion-card-content>
                                </ion-card>
                                
                                <ion-list>
                                    <ion-item>
                                        <ion-icon name="book-outline" slot="start"></ion-icon>
                                        <ion-label>已借图书: 1 本</ion-label>
                                    </ion-item>
                                    <ion-item>
                                        <ion-icon name="time-outline" slot="start"></ion-icon>
                                        <ion-label>借阅历史: 5 本</ion-label>
                                    </ion-item>
                                    <ion-item>
                                        <ion-icon name="settings-outline" slot="start"></ion-icon>
                                        <ion-label>设置</ion-label>
                                    </ion-item>
                                </ion-list>
                            </div>
                        </div>
                    </ion-content>
                    
                    <ion-tabs>
                        <ion-tab-bar slot="bottom">
                            <ion-tab-button tab="home" onclick="showHome()">
                                <ion-icon name="home-outline"></ion-icon>
                                <ion-label>首页</ion-label>
                            </ion-tab-button>
                            <ion-tab-button tab="books" onclick="showBooks()">
                                <ion-icon name="library-outline"></ion-icon>
                                <ion-label>图书</ion-label>
                            </ion-tab-button>
                            <ion-tab-button tab="borrow" onclick="showBorrow()">
                                <ion-icon name="book-outline"></ion-label>
                                <ion-label>借阅</ion-label>
                            </ion-tab-button>
                            <ion-tab-button tab="profile" onclick="showProfile()">
                                <ion-icon name="person-outline"></ion-icon>
                                <ion-label>我的</ion-label>
                            </ion-tab-button>
                        </ion-tab-bar>
                    </ion-tabs>
                </ion-app>
            `;
            
            // Replace app content
            document.getElementById('app').innerHTML = appHtml;
            updateDebug('App Rendered Successfully');
        }

        // Navigation functions
        function showPage(pageId) {
            const pages = document.querySelectorAll('.page-content');
            pages.forEach(page => page.style.display = 'none');
            
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.style.display = 'block';
            }
            
            // Update tab selection
            const tabs = document.querySelectorAll('ion-tab-button');
            tabs.forEach(tab => tab.removeAttribute('tab-active'));
            
            const activeTab = document.querySelector(`ion-tab-button[tab="${pageId.replace('-page', '')}"]`);
            if (activeTab) {
                activeTab.setAttribute('tab-active', 'true');
            }
        }

        function showHome() { showPage('home-page'); }
        function showBooks() { showPage('books-page'); }
        function showBorrow() { showPage('borrow-page'); }
        function showSearch() { showPage('search-page'); }
        function showProfile() { showPage('profile-page'); }
    </script>
</body>
</html>